<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    :title="title"
    width="850px"
    @close="resetForm('ruleForm')"
  >
    <button-group
      ref="buttonGroup"
      @submitForm="submitForm('ruleForm')"
      @cancel="dialogVisible = false"
    />
    <div class="formTopFont">内容登记</div>
    <el-row>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
      >
        <el-row>
          <el-form-item label="分类名称" prop="typeName">
            <!-- <el-input
                v-model.trim="ruleForm.typeName"
                maxlength="20"
                show-word-limit
              /> -->
            <el-select
              v-model.trim="ruleForm.typeName"
              placeholder="请选择分类"
              v-if="
                receivedData && receivedData.length && receivedData[0].children
              "
            >
              <el-option
                v-for="(item, index) in receivedData[0].children"
                :key="index"
                :label="item.typeName"
                :value="item.typeName"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建人" prop="userName">
              <el-input
                v-model="ruleForm.userName"
                maxlength="20"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input-number
                v-model="ruleForm.sort"
                controls-position="right"
                :min="0"
                :max="1000"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="主题" prop="theme">
            <el-input v-model="ruleForm.theme" maxlength="50" show-word-limit />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="主题描述" prop="remark">
            <el-input
              type="textarea"
              rows="3"
              v-model="ruleForm.remark"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </el-row>
      </el-form>

      <el-table border stripe height="220px" :data="ruleForm.relevanceList">
        <el-table-column prop="dataName" align="center">
          <template slot="header">
            <span style="color: #f56c6c">*</span>选择材料
          </template>
          <template #default="{ row, $index }">
            <el-select
              v-model="row.dataName"
              size="mini"
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="item in allChildren"
                :key="item"
                :value="item"
                :label="item"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="位置" align="center" width="100px">
          <template slot="header">
            <span style="color: #f56c6c">*</span>位置
          </template>
          <template #default="{ row }">
            <el-input-number
              v-model="row.sort"
              size="mini"
              :controls="false"
              :min="0"
              style="width: 100%"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="isShow"
          label="是否显示主题"
          align="center"
          width="100px"
        >
          <template slot="header"> 是否显示主题 </template>
          <template #default="{ row }">
            <el-switch
              v-model="row.isShow"
              :active-value="1"
              :inactive-value="0"
              size="mini"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px" align="center">
          <template #default="{ $index }">
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="ruleForm.relevanceList.splice($index, 1)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button
        style="width: 100%"
        @click="ruleForm.relevanceList.push({ ...basicParams })"
        >添加</el-button
      >
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  props: {
    // 定义一个 props 来接收父组件的数据
    receivedData: {
      type: Array, // 这里可以根据传递的数据类型调整类型 (String, Number, Object, Array, etc.)
      required: true, // 如果是必须传递的，可以设置为 true
    },
  },
  data() {
    // const checkSupplierCode = async (rule, value, callback) => {
    //   const res = await this.$axios.get(
    //     `/basic/supplier/verifyCodeUnique?supplierCode=${value}&id=${
    //       this.ruleForm.id || ""
    //     }`
    //   );
    //   if (res?.data.code === 200) {
    //     return res.data.data
    //       ? callback()
    //       : new Error(callback("供应商编号重复！"));
    //   } else {
    //     return new Error(callback(res.data.msg));
    //   }
    // };
    const params = {
      isShow: 1,
      dataName: "",
      sort: "",
    };
    return {
      title: "",
      deptList: [],
      typeOptions: [],
      allChildren: [
        "证明材料1",
        "证明材料2",
        "证明材料3",
        "证明材料4",
        "证明材料5",
        "证明材料6",
        "证明材料7",
        "证明材料8",
        "证明材料9",
      ],
      ruleForm: {
        theme: "",
        remark: "",
        typeName: "",
        userName: "",
        sort: 0,
        relevanceList: [],
      },
      treeProps: {
        value: "id",
        label: "deptName",
        children: "children",
      },
      rules: {
        theme: [{ required: true, message: "主题不能为空", trigger: "blur" }],
        typeName: [
          { required: true, message: "分类不能为空", trigger: "blur" },
        ],
        // supplierCode: [
        //   { required: true, message: "供应商编号不能为空！", trigger: "blur" },
        //   { validator: checkSupplierCode, trigger: "blur" },
        // ],
      },
      dialogVisible: false,
      departData: [],
      basicParams: params,
    };
  },
  watch: {},
  mounted() {},
  methods: {
    flattenChildren(children) {
      // 使用 reduce 方法将所有二级 children 展平为一个数组
      return children.reduce((acc, item) => {
        return acc.concat(item.children);
      }, []);
    },
    /**
     * @description: 新增编辑
     * @param {*} row
     * @return {*}
     */
    async showDialog(row) {
      this.dialogVisible = true;
      if (row && row.hasOwnProperty("id")) {
        this.title = "编辑";
        this.ruleForm = Object.assign({}, row);
        console.log(row);
      } else {
        this.title = "新增";
      }
    },
    /**
     * @description: 表单提交
     * @param {*} formName
     * @return {*}
     */
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await this.$axios.post(
            "/data/register/save",
            this.ruleForm
          );
          if (res?.data.code === 200) {
            this.$notify.success("提交成功！");
            this.dialogVisible = false;
            this.$emit("getTableInfo");
            this.$emit("getTreeData");
          } else {
            this.$notify.error(res.data.msg);
          }
        }
      });
    },
    /**
     * @description: 重置表单
     * @param {*} formName
     * @return {*}
     */
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm = {
        theme: "",
        remark: "",
        typeName: "",
        userName: "",
        sort: 0,
        relevanceList: [],
      };
    },
  },
};
</script>
<style lang="scss" scoped></style>
